import { useEffect,useState } from 'react'
import './App.css'
import { Outlet, useNavigate } from 'react-router-dom'
import axios from 'axios'
import { Select } from 'antd';

function App() {
  const navigate = useNavigate()
  const [ztTheme,setZtTheme] = useState(localStorage.getItem('thname')||'ee')

  useEffect(() => {
    axios.get('/api/article/list')
  }, [])

  const handleChange = (value:string) => {
    const theme = document.documentElement
    theme.setAttribute('data-theme',value)
    setZtTheme(value)
    localStorage.setItem('thname',value)
  };

  return (
    <div>
      <p style={{ width: '100%', display: 'flex', justifyContent: 'space-around', alignItems: "center" }}>
        <button style={{ width: '100%' }} onClick={() => navigate('/data1')}>数据1</button>
        <button style={{ width: '100%' }} onClick={() => navigate('/data2')}>数据2</button>
      </p>
      <br />
      <Select
        defaultValue={ztTheme}
        style={{ width: 120 }}
        onChange={handleChange}
        options={[
          { value: 'light', label: '日间' },
          { value: 'dark', label: '夜间' },
          { value: 'pink', label: '少女粉' },
          { value: 'blue', label: '天空蓝' },
          { value: 'green', label: '原谅绿' },
        ]}
      />
      <br />
      <h1>主页</h1>
      <Outlet></Outlet>
    </div>
  )
}

export default App
